<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>商品列表</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>

<p>Hello</p>

<div id="root">
  <table cellpadding="0" cellspacing="0" border="1" width="700px">
    <thead>
    <tr>
      <th>序号</th>
      <th>商品名称</th>
      <th>原价</th>
      <th>秒杀价</th>
      <th>库存数量</th>
      <th>商品描述</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(item, index) in goodsList" v-bind:key="item?.sid">
      <td>{{index+1}}</td>
      <td>{{item.name}}</td>
      <td>{{item.price}}</td>
      <td>{{item.priceSpike}}</td>
      <td>{{item.stock}}</td>
      <td><a :href="'/detail.html?sid='+item.sid">详情</a></td>
    </tr>
    </tbody>
  </table>
</div>

<script>
  const vm = new Vue({
    el: "#root",
    data: {
      goodsList: []
    },
    methods: {
      loadData() {
        axios.get("/goods").then(resp => {
          if (resp.status === 200) {
            this.goodsList = resp.data;
            console.log(resp.data)
            console.log(this.goodsList)
          } else {
            alert("请求失败：" + resp.status);
          }
        });
      }
    },
    created: function () {
      this.loadData();
    }
  });
</script>
</body>
</html>
